/* 配色方案 */
      /* 主色调:#0172b0 */
      /* 次色调:#88daf7 */
      /* 阴影色:#01517d */

      * {
        margin: 0;
        padding: 0;
      }

      body {
        min-height: 100vh;
        background: #68799f;
        /* background: url("../img/bg.jpg") no-repeat center/cover; */
      }

      .container {
        /* 使container居中 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        width: 400px;
        height: 240px;
      }

      .container .front,
      .container .back {
        /* 使front和back重叠 */
        position: absolute;

        width: 100%;
        height: 100%;

        background: linear-gradient(25deg, #0172b0, #88daf7);
        box-shadow: 6px 6px 14px #01517d, inset 0 0 15px #88daf7;

        display: flex;
        flex-direction: column;

        transition: 0.5s cubic-bezier(0.48, -0.56, 0.51, 1.67);
      }

      .container .front {
        /* 让front显示在前 */
        z-index: 1;
      }

      .turn {
        margin: 10px;
        text-align: right;
      }

      .turn i {
        font-weight: bold;
        cursor: pointer;
      }

      h2,
      h4 {
        margin: 10px 0;
        color: white;
        text-align: center;
        text-transform: uppercase;
      }

      .links {
        margin: 35px;

        display: flex;
        justify-content: space-between;
      }

      .links a {
        text-decoration: none;
      }

      .links i {
        color: white;
        font-size: 1.5rem;
      }

      .container .back {
        transform: rotateY(180deg);
      }

      .back.back-turn {
        transform: rotateY(0deg);
      }

      .front.front-turn {
        z-index: 0;
        transform: rotateY(-180deg);
      }

      @font-face {font-family: "iconfont";
        src: url('//at.alicdn.com/t/font_1277122_kub2hqyv5sp.eot?t=1562468225817'); /* IE9 */
        src: url('//at.alicdn.com/t/font_1277122_kub2hqyv5sp.eot?t=1562468225817#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
        url('//at.alicdn.com/t/font_1277122_kub2hqyv5sp.woff?t=1562468225817') format('woff'),
        url('//at.alicdn.com/t/font_1277122_kub2hqyv5sp.ttf?t=1562468225817') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
        url('//at.alicdn.com/t/font_1277122_kub2hqyv5sp.svg?t=1562468225817#iconfont') format('svg'); /* iOS 4.1- */
      }
      
      .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      .icon-change:before {
        content: "\e75d";
      }
      
      .icon-email:before {
        content: "\e653";
      }
      
      .icon-angular:before {
        content: "\e619";
      }
      
      .icon-web-icon-:before {
        content: "\e6d8";
      }
      
      .icon-css:before {
        content: "\e654";
      }
      
      .icon-react:before {
        content: "\f21a";
      }
      
      .icon-js:before {
        content: "\ec68";
      }
      
      .icon-weixin:before {
        content: "\e686";
      }
      
      .icon-html:before {
        content: "\e8f7";
      }
      
      .icon-vuejs:before {
        content: "\e849";
      }
      